<template>
    <div>
      <div class="main-tab">
        <x-header id="header" :left-options="{showBack: false}" class="top"><span class="tit">我的</span></x-header>
        <div class="part1">
          <div class="user1">
            <div class="user1-left">
              <img :src="avatar" class="round">
              <div class="user1-left-main">
                <span class="userName">{{nickName}}</span>
                <span class="level"><img src="../../../static/icon/my-icon/855105-copy.png"><span>LV.{{level}}</span></span>
              </div>
            </div>
            <div class="edit" @click="edit"><img src="../../../static/img/edit-1.png"><span>编辑资料</span></div>
          </div>
          <div class="user2">
            <flexbox>
              <flexbox-item><div class="flex-demo" @click="fans">
                <img class="balance-icon" src="../../../static/icon/my-icon/fensi.png" />
                <div class="balance-icon-name">粉丝</div></div></flexbox-item>
              <flexbox-item><div class="flex-demo" @click="follow"><img class="balance-icon2" src="../../../static/icon/my-icon/guanzhu.png" />
                <div class="balance-icon-name">关注</div></div></flexbox-item>
              <flexbox-item><div class="flex-demo" @click="collection">  <img class="balance-icon3" src="../../../static/icon/my-icon/shoucang.png" />
                <div class="balance-icon-name">收藏</div></div></flexbox-item>
              <flexbox-item><div class="flex-demo" @click="point">  <img class="balance-icon4" src="../../../static/icon/my-icon/jifen.png" />
                <div class="balance-icon-name">积分&nbsp;{{points}}</div></div></flexbox-item>
            </flexbox>
          </div>
        </div>
        <group class="group">
          <cell class="cell" :title="item.title" is-link v-for=" (item, index) in cellList" :key="index" :link="item.path" >
            <img slot="icon"  class="cell-icon" :src="item.icon"/>
          </cell>
        </group>
      </div>
      <b-tabbar :value="3" />
    </div>
</template>

<script>
  import bTabbar from '../../components/Btabbar'
  import { Confirm, cookie,Flexbox, FlexboxItem,XButton } from 'vux'
  import { getUserDetail } from '@/api/user';

  export default {
        name: "my",
      components: {
        bTabbar,
        Confirm,
        Flexbox,
        FlexboxItem,
        XButton
      },
      data(){
          return{
            cid:1,
            avatar:'',
            nickName:'',
            level:'',
            points:'',
            cellList: [
              {
                title:'我的消息',
                icon: require('../../../static/icon/my-icon/wodexiaoxi.png'),
                path:'myMessage'
              },
              {
                title:'我的发表',
                icon: require('../../../static/icon/my-icon/wodefabiao.png'),
                path:'myPublish'
              },
              {
                title:'我的问答',
                icon: require('../../../static/icon/my-icon/wodewenda.png'),
                path:'myQA'
              },
              {
                title:'店铺认证',
                icon: require('../../../static/icon/my-icon/dianpurenzheng.png'),
                path:'shop_cert'
              },
              {
                title:'黑名单',
                icon: require('../../../static/icon/my-icon/heimingdan.png'),
                path:'blacklist'
              },
              {
                title:'我的需求',
                icon: require('../../../static/icon/my-icon/xuqiu.png'),
                path:'myNeed'
              },
            ]
          }
      },
      methods:{
          fans(){
            this.$router.push({
              name: 'fans'
            });
          },
        follow(){
          this.$router.push({
            name: 'focus'
          });
        },
        collection(){
          this.$router.push({
            name: 'collection'
          });
        },
        point(){
          this.$router.push({
            name: 'points'
          });
        },
        edit(){
            this.$router.push({
              name:'edit'
            })
        },
        getUserDetail(){
            this.cid=JSON.parse(cookie.get('userInfo')).id;
            getUserDetail(parseInt(this.cid)).then(res =>{
              console.log(res)
              this.avatar=res.avatar;
              this.nickName=res.nickname;
              this.level=res.level;
              this.points=res.points;
            })
        },
        test(){

        }
      },
    created(){
          this.getUserDetail();
    }
    }
</script>

<style scoped>
.top{
  background: #AD2532;
  box-shadow: 0 0 0 0 rgba(0,0,0,0.25);
}
.tit{
  margin-top: 8px;
  font-family: "PingFangSC-Semibold",serif;
  font-size: 17px;
  color: #FFFFFF;
  letter-spacing: -0.41px;
  text-align: center;
}
.part1{
  padding-top:46.5px;
  height: 12.36rem;
  background: #FFFFFF;
}
.user1{
  display: flex;
  height: 7.14rem;
  border-bottom: 1px solid #F4F4F4;
  justify-content: space-between;
}
.user1-left{
  display: flex;
}
.user1 .user1-left-main{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.user2{
  height: 5.22rem;
}
.round{
  width: 5rem;
  height: 5rem;
  border-radius:50%; overflow:hidden;
  align-items: center;
  justify-content: center;
  border: 1px solid #F4F4F4;
  margin-left: 1.07rem;
  margin-top: 1.07rem;
}
.userName{
  /*position: absolute;*/
  height: 1.71rem;
  font-family: "PingFangSC-Semibold",serif;
  font-size: 17px;
  color: #4A4A4A;
  letter-spacing: -0.41px;
  text-align: center;
  margin-top: 1.25rem;
  margin-left: 0.83rem;
}
.user1-left-main .level{
  /*position: absolute;*/
  border: 1px solid #AD2532;
  border-radius: 0.89rem;
  width: 5rem;
  height: 1.79rem;
  margin-bottom: 1rem;
  margin-left: 0.83rem;
  color:#AD2532 ;
}
.user1-left-main .level img{
  width: 1rem;
  margin-top: 0.5rem;
  margin-left: 0.8rem;
}
.user1-left-main .level span{
  margin-left: 0.5rem;
  font-size: 12px;
}
.edit{
  margin-top:0.83rem;
  font-family: "PingFangSC-Semibold",serif;
  font-size: 12px;
  color: #9B9B9B;
  letter-spacing: -0.29px;
  text-align: center;
  margin-right: 1.07rem;
}
.edit img{
  width: 15px;
  height: 15px;
  margin-top: 5px;
}
.edit span{
  margin-left: 3px;
}
.balance-icon {
  display: block;
  margin: 0.58rem auto;
  height:  2.14rem;
  width: 2.14rem;
}
.balance-icon2 {
  display: block;
  margin: 0.71rem auto;
  height:  2rem;
  width: 2.14rem;
}
.balance-icon3 {
  display: block;
  margin: 0.68rem auto;
  height:  2.14rem;
  width: 2.14rem;
}
.balance-icon4 {
  display: block;
  margin: 0.58rem auto;
  height:  2.14rem;
  width: 2.14rem;
}
.balance-icon-name {
  text-align: center;
  line-height: 1.5rem;
  font-family: "PingFangSC-Semibold",serif;
  font-size: 12px;
  color: #9B9B9B;
  letter-spacing: 0;
}
.group img {
  height: 1.29rem;
  width: 1.29rem;
  margin-right: 1rem;
}
.cell{
  font-family: "PingFangSC-Semibold",serif;
  font-size: 14px;
  color: #4A4A4A;
  letter-spacing: 0;
  margin-left: -0.5rem;
}
.login-button {
  position: absolute;
  margin: 5.21rem 8.52rem;
  border-color: #AD2532;
  color: #AD2532;
  font-size: 1rem;
  border-radius: 1.2rem;
  height: 2.4rem;
  width: 8rem;
  line-height: 2.4rem
}
</style>
